<template>
  <el-form label-position="right" label-width="80px" ref="form" :rules="rules" :model="form">
    <el-form-item label="任务类型" prop="name">
      <el-select v-model="form.type" placeholder="请选择任务类型">
        <el-option
          v-for="item in typeList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="图标名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入图标名称"></el-input>
    </el-form-item>
    <el-form-item label="任务图标" prop="img">
      <!-- <div class="imgUploadDiv" @click="handleResultAvatar">
        <img-upload
          v-model="form.img"
          tips=""
          method="profile"
          :imgurl="profile_img"
          :updisabled="upDisabled"
          @result="resultAvatar"
        ></img-upload>
      </div> -->
      <el-upload
        class="avatar-uploader"
        action="#"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="changePictureUploadAvatar">
        <img v-if="form.img" :src="form.img" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" aria-hidden="true"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="form.status">
        <el-radio label="1">正常</el-radio>
        <el-radio label="2">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="contacts-add">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import * as APITask from '@/api/task'
import imgUpload from "@/components/AppUpload/index";
import { uploadFilePromise } from '@/api/upload'
export default {
  name: 'task-icon-add',
  components: { imgUpload },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    typeList: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      form: {
        name: '',
        status: '1',
        type: '',
        img: ''
      },
      methodType:'profile',
      profile_img: "",
      upDisabled: false,
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: '请输入图标名称',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择任务类型',
            trigger: 'blur'
          }
        ],
        img: [
          {
            required: true,
            message: '请上传图标',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {},
  methods: {
    // 上传头像
    changePictureUploadAvatar (file) {
      uploadFilePromise(file).then(res => {
        if(res.code == 200){
           this.form.img = res.data;
           this.$message({ type: "success", message: "上传成功!"});
        }
      })
    },
    handleResultAvatar() {
      this.methodType = "img";
    },
    resultAvatar(data) {
      this.$set(this.form, "profile_id", data.id);
    },
    lead () {
      this.form.msg = this.mealTemp
      this.$forceUpdate()
    },
    // 添加老人家属
    onSubmit () {
      const { id, name, img, type } = this.form
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (id) {
            const data = {
              id,
              name,
              img,
              type
            }
            APITask.tasktypeIconEdit(data).then(res => {
              this.$message({type: "success",  message: "修改成功" });
              this.cancle()
              this.load()
            })
          } else {
            APITask.tasktypeIconAdd(this.form).then(res => {
              this.$message({type: "success",  message: "添加成功" });
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        if(newval.hasOwnProperty('status')){
          newval['status'] = String(newval['status']);
        }
        this.form = JSON.parse(JSON.stringify(newval))
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
  .type-add-input {
    textarea {
      font-family: arial;
    }
  }
  .imgUploadDiv{
    .avatar-uploader {
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      i.icon-uploader-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        vertical-align: bottom;
      }
      img{
         width: 178px;
         height: 178px;
      }
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  }
  .avatar-uploader{
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    i.avatar-uploader-icon{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 120px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      vertical-align: bottom;
    }
  }
</style>
